<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../layui/css/layui.css"  media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<script src="../../layui/layui.js" charset="utf-8"></script>
<body style="padding: 10px;background-color: rgb(236,240,245);">
	<!-- 功能区+表格 -->
	<div style="background-color: white;">
		<div class="layui-row">
			<!-- 搜索框 -->
			<div class="layui-col-xs3" style="padding-top: 10px;padding-left: 10px;">
				<div style="width: 208px;height: 30px;border: 1px solid black;">
					<input placeholder="查找..." style="height: inherit;border: 0;"/>
					<button type="button" class="layui-btn layui-btn-sm layui-bg-cyan" style="position: absolute;"><i class="layui-icon layui-icon-search"></i></button>
				</div>
			</div>
		</div>

		<table class="layui-hide" id="tb_user" lay-filter="filter_user"></table>
		<!-- 表格工具列 -->
		<script type="text/html" id="bar_userEdit">
				<input type="checkbox" lay-ignore lay-event="edit">
		</script>
	</div>
</body>
<script>
	// 表格模块
	layui.use('table', function(){
		var table = layui.table;

		table.render({
			elem:'#tb_user',
			url:'',
			title: '用户数据表',
			cols: [[
				{fixed: 'left', toolbar: '#bar_userEdit', width:150},
				{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
				{field:'city', title:'头像', width:100},
				{field:'city', title:'部门', width:100},
				{field:'city', title:'真实姓名', width:100},
				{field:'city', title:'用户名', width:100},
				{field:'city', title:'职位', width:100},
				{field:'city', title:'电话', width:100}
			]],
			page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					layout: ['limit', 'count', 'prev', 'page', 'next', 'skip','refresh'], //自定义分页布局
					groups: 5, //只显示 1 个连续页码
					first: false, //不显示首页
					last: false //不显示尾页
				}
			});

	  //监听行工具事件
		table.on('tool(filter_user)', function(obj){

			var data = obj.data;
			if(obj.event == 'del'){

				layer.confirm('真的删除行么', function(index){

					obj.del();
					layer.close(index);
				});
			} else if(obj.event == 'edit'){

				layer.prompt({formType: 2,value: data.email}, function(value, index){

					obj.update({email: value});
					layer.close(index);
				});
			}
		});
	});
</script>
</html>